* {
  margin: 0;
  padding: 0;
}
body {
	/*视点距离*/
  perspective: 1000px;
}
#box {
  width: 400px;
  height: 400px;
  margin: 80px auto;
  /*border: 1px solid red;*/
  /*background: #d4e38c;*/
  position: relative;
  transform-style: preserve-3d;
  /*infinite是无限循环*/
  animation: hd 5s infinite linear;
}
@-webkit-keyframes hd{
	from{transform:  rotateX(0) rotateY(0);}
	to{transform: rotateX(360deg) rotateY(360deg);}
	/*from{transform: rotateY(0);}
	to{transform: rotateY(360deg);}*/
}
#box div{
	width: 200px;
	height: 200px;
	position: absolute;
	left: 100px;
	top: 100px;
	/*opacity: 0.6;*/
	text-align: center;
	line-height: 200px;
	transform-style: preserve-3d;
}
#box div:nth-of-type(1){
	background: url(img/1.gif);
	transform: translateZ(100px);
	/*transform-origin: top;*/
}
#box div:nth-of-type(2){
	background:url(img/2.jpg);
	transform: translateZ(-100px) rotateY(180deg);
}
#box div:nth-of-type(3){
	background:url(img/3.gif);
	transform: translateZ(-100px) rotateY(-90deg);
	transform-origin:left;
}
#box div:nth-of-type(4){
	background:url(img/6.jpg);
	background-size: 100%;
	transform: translateZ(-100px) rotateY(90deg);
	transform-origin:right;
}
#box div:nth-of-type(5){
	background:url(img/5.gif);
	background-size: 100%;
	transform: translateZ(-100px) rotateX(90deg);
	transform-origin: top;
}
#box div:nth-of-type(6){
	background:url(img/4.gif) no-repeat;
	background-size: cover;
	transform: translateZ(-100px) rotateX(-90deg);
	transform-origin: bottom;
}
#box:hover{
	cursor: pointer;
	/*触摸暂停*/
	animation-play-state: paused;
}
